<template>
  <el-aside>
    <div class="banner">
      <img src="@/assets/banner-img.jpg" alt="">
      <span v-show="!isCollapse">宝可梦管理系统</span>
    </div>

    <el-menu :collapse="isCollapse" :default-active="menuStore.currentMenu">
      <el-sub-menu v-for="(menu, index) of menus" :key="index" :index="menu.name">
        <template #title>
          <el-icon>
            <component :is="menu.icon" />
          </el-icon>
          <span>{{  menu.title  }}</span>
        </template>
        <el-menu-item v-for="(cmenu, index) of menu.children" :key="index" :index="cmenu.name"
          @click="switchMenu(cmenu)">
          {{  cmenu.title  }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useMenuStore } from "../store/menu";
import { useRouter } from 'vue-router'
const menuStore = useMenuStore()
const router = useRouter()

let { isCollapse, menus } = storeToRefs(menuStore)

function switchMenu(cmenu: any) {
  router.push(cmenu.path)
  sessionStorage.setItem('currentMenu', cmenu.name)
}
</script>

<style scoped lang="less">
.el-aside {
  .banner {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      height: 50px;
      border-radius: 50%;
    }

    span {
      line-height: 50px;
      font-weight: 700;
      font-size: large;
    }
  }
}
</style>